<template>
    <div class="main">
        <el-row>
            <el-col :span="3"><before_NavMenu></before_NavMenu></el-col>
            <el-col :span="21">
                <before_heard></before_heard>
                <div v-if="$route.fullPath == '/before_main'" class="welcome">
                    <div>
                        <h1>欢迎来到心理咨询平台！</h1>
                        <el-divider></el-divider>
                        <el-tabs class="tab" v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="情绪压力" name="first">
                                <div class="x1">
                                    <a href="https://www.jiandanxinli.com/posts/4729?utm_medium=knowledge-1&utm_source=position" target="_blank">

                                        <p>我们大概都在生活里顺嘴说过，假如某愿望达成，死了都愿意。Soul的主人公Joe这天也说了，并且还实现了这个愿望。
                                            于是在路上他完全没留心几乎要砸到他的砖垛，跨过满地香蕉皮，擦过急刹住的车，躲过一条狗的偷袭，最后精准掉进下水道，死了。
                                            或许是弗洛依德所说的死本能，又或许是命数已到在劫难逃，反正从死亡...</p>
                                        <div class="el-icon-view"> 18354阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/posts/4728?utm_medium=knowledge-2&utm_source=position" target="_blank">
                                        <p>在我们开始这个梦的分析之前，首先有必要介绍一下这部电影的梗概，当然，本着网上那句禁止剧透的原则，文中涉及的情节不会影响大家去看这部电影。
                                            电影的内容主要讲述着一个家庭的创伤代际传递与女性身份认同的故事，电影中郝蕾饰演的角色，在自己生活的家庭里与母亲之间让人触目惊心的扭曲关系，
                                            以及自己成为母...</p>
                                        <div class="el-icon-view"> 16374阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/materials/488?utm_medium=knowledge-3&utm_source=position" target="_blank">

                                        <h3>漫画：如果我抑郁了请这样陪伴我</h3>
                                        <p>
                                            注：文中提到的【抑郁】泛指抑郁情绪，而非【抑郁症】 如果被诊断为抑郁症，请一定向专业的心理工作者求助
                                            △ 抑郁它总是静悄悄的来~
                                            △ 每个人都可能被它俘获
                                            △ 很多人会选择戴上微笑面具，不想、不敢让别人察觉，假装自己一切都很...</p>
                                        <div class="el-icon-view"> 13565阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/materials/530?utm_medium=knowledge-4&utm_source=position" target="_blank">
                                        <h3>如何破除「越想睡 越失眠」的魔咒？</h3>
                                        <p>
                                            简单心理 MYTHERAPIST 我有个朋友失眠正当年，每晚都很煎熬。 因为体会过失眠有多么痛苦和可怕，
                                            所以他总是为入眠做充足准备：喝牛奶，泡热水澡，远离手机，11点准时躺到床上，心里祈祷着：千
                                            万别再失眠了！ 但越是这样就越睡不...</p>
                                        <div class="el-icon-view"> 15374阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/posts/2932?utm_medium=knowledge-5&utm_source=position" target="_blank">
                                        <h3>当人生遭遇无价值感</h3>
                                        <p>
                                            我们所处的时代正发生着翻天覆地的变化，物质生活越来越丰富，可是人的内心却越来越贫瘠，
                                            也许如今的社会中越来越没有统一的价值观， 人们可以崇拜金钱，也可以遵守传统，既可以开放也可以保守，我们看似极其自由
                                            ，同时也极其空虚和恐...</p>
                                        <div class="el-icon-view"> 11374阅读 </div>
                                    </a>



                                </div>
                                <div class="y1">
                                    <a href="https://www.jiandanxinli.com/report2016" target="_blank">
                                        <img src="https://jdxl-img.jdxlt.com/uploads/57e8839242ea48baaad3c1e31632975c.png" class="img_one">
                                    </a>
                                    <img src="https://jdxl-img.jdxlt.com/post/540c585deb6c4ec2b419d40b120e6c85.gif" class="img_two">
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="家庭关系" name="second">
                                <div class="x1">
                                    <a href="https://www.jiandanxinli.com/posts/4728?utm_medium=knowledge-1&utm_source=position" target="_blank">
                                        <p>在我们开始这个梦的分析之前，首先有必要介绍一下这部电影的梗概，当然，本着网上那句禁止剧透的原则，
                                            文中涉及的情节不会影响大家去看这部电影。   电影的内容主要讲述着一个家庭的创伤代际传递与女性身份认同的故事，
                                            电影中郝蕾饰演的角色，在自己生活的家庭里与母亲之间让人触目惊心的扭曲关系，以及自己成为母...</p>
                                        <div class="el-icon-view"> 11735阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/posts/3633?utm_medium=knowledge-2&utm_source=position" target="_blank">
                                        <p>我一直以为我会是一位非常好的父亲，因为我自认为性格很温和，耐心，又很喜欢小孩，
                                            再加上我是专业的。 可是养了小狗之后，我突然意识到其实做一位好的父母比我想象中的要难。 养狗，如养儿 我是上个月的一个周四，
                                            开车了九小时从一户Amish家庭里带回了这只博士奇（博美-哈士奇）。 我挺开心的。但是在接下来的一周...</p>
                                        <div class="el-icon-view"> 13274阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/materials/359?utm_medium=knowledge-3&utm_source=position" target="_blank">
                                        <h3>“好像我才是他们的父母”</h3>
                                        <p>
                                            文|丸子 简单心理     朋友在谈及她与母亲的关系时如此描述： “五岁的时候，我就学会了洗衣做饭，打扫房间。
                                            妈妈对我期望很大，希望我能代替她完成她年轻时跳芭蕾舞的梦想。”
                                            这似乎很像是平时大家所推崇的“懂事的孩子、爸妈的贴心小棉...</p>
                                        <div class="el-icon-view"> 19274阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/materials/1095?utm_medium=knowledge-4&utm_source=position" target="_blank">
                                        <h3>建议你老老实实当个没有梦想的普通人</h3>
                                        <p>
                                            我一个写文章的编辑，已经整整三天没有任何写作思路了。   记得刚来公司接到的第一个任务，是“本周出两篇文章”。
                                            我虽然心里一颤，嘴里还是说着“好的，我试试。”然后我下载了一个提升工作效率的手机种树软件，在种了六十多颗...</p>
                                        <div class="el-icon-view"> 16474阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/posts/3319?utm_medium=knowledge-5&utm_source=position" target="_blank">
                                        <h3>重构自我生命故事 – 叙事治疗简介</h3>
                                        <p>
                                            我常常被问到： 叙事不就是说故事吗？ 说故事是很平常的事，怎么会成为一种治疗方式呢？
                                            因此，本文将对叙事治疗的理论基础进行简介，并且借助具体案例帮助大家理解叙事治疗。
                                            什么是叙事治疗？ 叙事治疗是属于后现代主义的心理治疗方法，</p>
                                        <div class="el-icon-view"> 15574阅读 </div>
                                    </a>
                                </div>
                                <div class="y1">
                                    <img src="https://jdxl-img.jdxlt.com/uploads/57e8839242ea48baaad3c1e31632975c.png" class="img_one" >
                                </div>

                            </el-tab-pane>
                            <el-tab-pane label="咨询小科普" name="third">
                                <div class="x1">
                                    <a href="https://www.jiandanxinli.com/materials/1759?utm_medium=knowledge-1&utm_source=position" target="_blank">
                                        <h3>心理咨询的不同流派有什么区别？</h3>
                                        <p>
                                            上面这段视频来自 YouTube 网站上的免费科普课程Crash Course。本期主讲人介绍了心理咨询主要几个流派的区别，
                                            有助于大家更全面地了解心理咨询，也能指导大家有针对性地选择心理咨询师，非常有帮助。点击可看～
                                            心理咨询的不同流派就好比武林的各大派别，他们师出不同门派，用不同的招数、功法打败对手。但他们...</p>
                                        <div class="el-icon-view"> 20074阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/weixin_classes/196?utm_medium=knowledge-3&utm_source=position" target="_blank">
                                        <h3>在咨询中感受你的感受</h3>
                                        <p>
                                            *更新说明： 本栏目目前在app内已经停止更新。 BYM book club系列：《给心理治疗师的礼物》
                                            第二十-二十二章：在咨询中感受你的感受 在前几章中也有提到，咨询师要能够使用自己的感受作为咨询的材料。
                                            因为在咨询室中，咨询师感受到的...</p>
                                        <div class="el-icon-view"> 21574阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/materials/768?utm_medium=knowledge-5&utm_source=position" target="_blank">
                                        <h3>如何处理亲密关系中的矛盾与冲突？</h3>
                                        <p>
                                            如果你 “正在被亲密关系中的争吵、冷战困扰，总是与伴侣处在冲突中。” “常在亲密关系中感到负面情绪，不知道该如何应对和调节。”   “习惯于在亲密关系中“妥协和牺牲”，倍感无力和疲倦。”
                                            “期待与伴侣一起，经营真正健康的亲密关系，提高彼此幸福感。”
                                            你可以选择和ta一起，接受「伴侣咨询 」的帮助。  ☞...</p>
                                        <div class="el-icon-view"> 15574阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/posts/4256?utm_medium=knowledge-6&utm_source=position" target="_blank">
                                        <h3>如何缓解抑郁情绪</h3>
                                        <p>
                                            本文内容为@李昭 咨询师《如何缓解抑郁情绪？》文字稿，戳文末图片回听课程。
                                            大家晚上好，欢迎来简单心理参加这一场关于抑郁情绪的讲座。
                                            抑郁是一种常见的情绪，是一种冷色调的感觉，最基本的特征就是一种无力的，无助的，无望的感...</p>
                                        <div class="el-icon-view"> 19574阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/posts/2217?utm_medium=knowledge-9&utm_source=position" target="_blank">
                                        <h3>不要与心理咨询师交朋友</h3>
                                        <p>
                                            《心理咨询师说心理咨询》之五 任何领域，优秀的总是少数。而生活中，我们总是希望结识到优秀的人士成为自己的朋友。
                                            尤其，每个人几乎都会渴望，有一位优秀的医生成为自己的朋友，以便于在我们的身体出现了状况时获得可以信赖的帮助。</p>
                                        <div class="el-icon-view"> 37274阅读 </div>
                                    </a>

                                </div>
                                <div class="y1">
                                    <a href="https://www.jiandanxinli.com/report2016" target="_blank">
                                        <img src="https://jdxl-img.jdxlt.com/uploads/57e8839242ea48baaad3c1e31632975c.png" class="img_one">
                                    </a>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="人际关系" name="fourth">
                                <div class="x1">
                                    <a href="https://www.jiandanxinli.com/posts/2026?utm_medium=knowledge-1&utm_source=position" target="_blank">
                                        <h3>是谁铸成了你的关系困境？</h3>
                                        <p>
                                            生为一个社会人，我们一定都处在人际关系中。 人际关系对于我们每一个人，上至权贵大咖，下至平民百姓，都是非常重要的。
                                            良好的人际关系，可以提升我们的安全感和自尊水平，让我们感到自信满满，更好地发挥自身价值。我们都渴望拥有良...</p>
                                        <div class="el-icon-view"> 22574阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/materials/533?utm_medium=knowledge-2&utm_source=position" target="_blank">
                                        <h3>“我希望你好，但不希望你太好”</h3>
                                        <p>
                                            简单心理 MYTHERAPIST 我有个特别特别特别好的朋友，她上周换了工作，工资翻了一倍。恰好最近又换了男朋友，颜值高了一截。
                                            可谓情场职场都得意。 她说周末请我吃饭，我说“太好了！这么多高兴的事儿，得狠宰你一顿”。 但是我自己知...</p>
                                        <div class="el-icon-view"> 16574阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/posts/1998?utm_medium=knowledge-3&utm_source=position" target="_blank">
                                        <h3>我要成长为一个什么样的人</h3>
                                        <p>
                                            心理学对“自我”这一概念的认识可谓纷繁复杂，不同流派有不同的认识。 总体而言，对“自我”这一概念的认识大致可以分为两类。
                                            一类认为       自我在成人后是固定不变的，倾向于从个体的视角看自我，强调人应该忠实于自我； 另一类认为...  </p>
                                        <div class="el-icon-view">11574阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/posts/2932?utm_medium=knowledge-4&utm_source=position" target="_blank">
                                        <h3>当人生遭遇无价值感</h3>
                                        <p>
                                            我们所处的时代正发生着翻天覆地的变化，物质生活越来越丰富，可是人的内心却越来越贫瘠，
                                            也许如今的社会中越来越没有统一的价值观，人们可以崇拜金钱，也可以遵守传统，既可以开放也可以保守，
                                            我们看似极其自由，同时也极其空虚和...</p>
                                        <div class="el-icon-view"> 24574阅读 </div>
                                    </a>
                                    <a href="https://www.jiandanxinli.com/materials/1378?utm_medium=knowledge-6&utm_source=position" target="_blank">
                                        <h3>别逼你的脑子了，它现在不想动｜漫画</h3>
                                        <p>
                                            冯女士 / 酒鬼 ✑ 策划 野生好人 ✏ 插画</p>
                                        <div class="el-icon-view"> 35574阅读 </div>
                                    </a>

                                </div>
                                <div class="y1">
                                    <a href="https://www.jiandanxinli.com/report2016" target="_blank">
                                        <img src="https://jdxl-img.jdxlt.com/uploads/57e8839242ea48baaad3c1e31632975c.png" class="img_one">
                                    </a>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="心理测试" name="fifth" >
                                <div class="examine">
                                    <span style="padding-top: 5px;padding-left: 10px;padding-bottom: 10px;display: block">心理测试：心理压力越大，小黑点闪烁就越快，讨厌的小黑点还是安静点吧！</span>
                                    <img src="../img/3.png" class="img_three">
                                </div>

                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <router-view></router-view>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import before_heard from '@/components/before_heard'
    import before_NavMenu from "@/components/before_Navmenu";
    import ElTableBody from "element-ui/packages/table/src/table-body";
    export default {
        data() {
            return {
                activeName: 'first'
            };
        },
        components: {
            before_heard,
            before_NavMenu,
            ElTableBody
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    };
</script>
<style lang="scss" scoped>

    h1 {
        font-weight: 700;
        font-size:30px;
        text-align: center;
        font-family: "微软雅黑";
        padding-top: 20px;
    }
    el-tab-pane {
        height: 80px;
        width: 32px;
        text-align: center;
    }
    .tab {
        margin: 10px;
        text-align: center;

    }
    a {
        text-decoration: none;
    }
    p {
        padding: 5px 30px;
        width: 800px;
        text-align: left;
        margin: 5px 0;
        font-size: 14px;
        color: #666;
        line-height: 20px;
    }
    h3 {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        padding-bottom: 5px;
        text-align: left;
        display: block;
        padding-left: 30px;
    }
    h3:hover {
        color: skyblue;
    }
    .examine {
        margin-left: 400px;
        height: 700px;
        width: 700px;
        background-color: aliceblue;


    }
    .img_one {
        height: 300px;
        width: 500px;
        display: block;
        box-shadow: 10px 10px 10px -1px rgba(0,0,0,.6);
    }
    .img_two {
        padding-top: 150px;
        width: 30%;
        height: 30%;
        box-shadow: -30px 10px 10px -10px rgba(255,228,181,.9);
    }
    .img_three {
        height: 600px;
        width: 600px;
    }
    .x1 {
        float: left;

    }
    .y1 {
        float: left;
        padding-left: 160px;
    }
    .el-icon-view {
        padding-left: 30px;
        padding-bottom: 50px;
        font-size: 14px;
        color: #999;
        text-align: left;
        width: 800px;

    }
    .welcome {
        display: flex;
        justify-content: center;
        .title {
            font-size: 30px;
            font-weight: 900;
        }
    }
</style>
